<template>
  <div>
    <page-main>
      <el-row :gutter="20">
        <!-- <el-col :span="4">
          <div class="flexRow">
            <span style="width: 120px">设备类型</span>
            <el-select
              v-model="searchForm.mold_id"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in moldType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="flexRow">
            <span style="width: 50px">状态</span>
            <el-select
              v-model="searchForm.status"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in status"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col> -->
        <el-col :span="8">
          <div class="flexRow" style="white-space: nowrap">
            <span style="margin-right: 10px">日期</span>
            <el-date-picker
              v-model="updata_times"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="x"
            >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" style="margin-left: 10px" @click="searchBtn">搜索</el-button>
          <el-button type="warning" @click="refreshBtn">重置</el-button>
        </el-col>
      </el-row>
    </page-main>
    <page-main>
      <div>
        <h3>报警数据统计</h3>
      </div>
      <div class="uniInfoTable">
        <el-table :data="uniInfoTable" border height="11%" v-loading="uniInfoTableLoading">
          <el-table-column label="id" prop="yj_unit_id" width="50"></el-table-column>
          <el-table-column label="单位名称" prop="yj_unit_full_name"> </el-table-column>
          <el-table-column label="火警告警次数" prop="exec_bj">
            <template #default="scope">
              <span
                @click="handleCheck(scope.row, 'exec_bj')"
                class="hoverClass"
                :class="{ 'has-total': parseInt(scope.row.exec_bj, 10) > 0 }"
                >{{ scope.row.exec_bj }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="预警告警次数">
            <template #default="scope">
              <span
                @click="handleCheck(scope.row, 'exec_yj')"
                class="hoverClass"
                :class="{ 'has-total': parseInt(scope.row.exec_yj, 10) > 0 }"
                >{{ scope.row.exec_yj }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="故障告警次数">
            <template #default="scope">
              <span
                @click="handleCheck(scope.row, 'exec_gz')"
                class="hoverClass"
                :class="{ 'has-total': parseInt(scope.row.exec_gz, 10) > 0 }"
                >{{ scope.row.exec_gz }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="deviceInfoTable">
        <el-table :data="deviceInfoTable" border size="small" v-loading="deviceInfoTableLoading">
          <el-table-column label="设备编号" prop="device_no"></el-table-column>
          <el-table-column label="设备名称" prop="device_name"></el-table-column>
          <el-table-column label="报警类型" prop="method" :formatter="bjType" width="80"></el-table-column>
          <el-table-column label="发生时间" prop="create_time" :formatter="formatterTime"></el-table-column>
          <!-- :formatter="happendTime" -->
          <el-table-column label="安装位置">
            <template #default="scope">
              <span>{{ scope.row.device_data.pos_info || scope.row.address || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" width="80" :formatter="statusFormatter"></el-table-column>
          <el-table-column label="处理来源" prop="exec_source" :formatter="exec_source"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="deviceHandleCurrentChange"
            v-model:currentPage="deviceInfoTableInfo.page"
            :page-count="deviceInfoTableInfo.total_page"
            :total="deviceInfoTableInfo.total"
            layout="total,prev, pager, next, jumper"
            background
          >
          </el-pagination>
        </div>
      </div>
    </page-main>
  </div>
</template>

<script>
import { setDeviceData } from '@/util/deviceData'
export default {
  data() {
    return {
      updata_times: '',
      searchForm: {
        // mold_id: "",
        // status: "",
        start_update_time: '',
        end_update_time: ''
      },
      uniInfoTable: [],
      uniInfoTableLoading: false,
      deviceInfoTable: [],
      deviceInfoTableLoading: false,
      deviceInfoTableInfo: '',
      deviceParams: {
        yj_unit_id: '',
        method: ''
      }
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    //   搜索
    searchBtn() {
      this.getDeviceLists()
    },
    // 重置
    refreshBtn() {
      this.searchForm = {
        mold_id: '',
        status: '',
        start_update_time: '',
        end_update_time: ''
      }
      this.updata_times = ''
      this.getDeviceLists()
    },
    formatterTime(row, column, cellValue, index) {
      return this.$getDateTime(cellValue)
    },
    exec_source(row, column, cellValue, index) {
      if (row.status != 1) {
        let temp = ['设备上报', '总后台', '维保单位', '消防监管单位', '社会单位', '第三方平台']
        return temp[cellValue]
      }
    },
    statusFormatter(row, column, cellValue, index) {
      let temp = ['', '未处理', '已处理']
      return temp[cellValue]
    },
    happendTime(row, column, cellValue, index) {
      return this.$getDateTime(cellValue)
    },
    bjType(row, column, cellValue, index) {
      let temp = ['', '预警', '故障', '报警']
      return temp[cellValue]
    },
    getLists(page) {
      this.uniInfoTableLoading = true
      let pageNum = 1
      if (page) {
        pageNum = page
      }

      let params = {
        page: pageNum,
        rows: 13,
        total_type: ['yj_unit']
      }
      if (this.yj_unit_id) {
        if (this.yj_unit_id.length == 3) {
          params.yj_unit_id = this.yj_unit_id[this.yj_unit_id.length - 1]
        } else {
          params.region_id = this.yj_unit_id[this.yj_unit_id.length - 1]
        }
      }
      this.$api
        .post('/unit/DeviceWarning/warningTotal', params)
        .then((res) => {
          this.uniInfoTable = res.data.list
        })
        .finally(() => {
          this.uniInfoTableLoading = false
        })
    },
    deviceHandleCurrentChange(e) {
      this.getDeviceLists(e)
    },
    async getDeviceLists(page) {
      this.deviceInfoTableLoading = true
      let pageNum = 1
      if (page) {
        pageNum = page
      }
      let searchParams = JSON.parse(JSON.stringify(this.searchForm))
      if (this.updata_times) {
        searchParams.start_update_time = this.updata_times[0] / 1000
        searchParams.end_update_time = this.updata_times[1] / 1000 + 86400
      }
      let params = {
        page: pageNum,
        rows: 9,
        ...searchParams
      }
      let resp = await this.$api.post('/unit/DeviceWarning/Lists', Object.assign(params, this.deviceParams))
      this.deviceInfoTable = await setDeviceData(resp.data.list)
      this.deviceInfoTableInfo = resp.data
      this.deviceInfoTableLoading = false
    },
    handleCheck(row, type) {
      this.deviceParams.yj_unit_id = row.yj_unit_id
      this.deviceParams.method = type
      this.getDeviceLists()
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
.flexRow {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.hoverClass {
  &.has-total {
    cursor: pointer;
    color: #409eff;
  }
}
</style>
